<template>
	<view class="cont">
		<view class="text" v-if="!isshow">申请成为代理人</view>
		<view class="inputli">
			<view class="li">
				<text class="inputText">姓名：</text>
				<view class="input">
					 <u--input
						placeholder="请输入姓名"
						border="surround"
						v-model="dlname"
						:disabled='isshow'
						maxlength="11"
					  ></u--input>
				</view>
			</view>
			<view class="li">
				<text class="inputText">手机号：</text>
				<view class="input">
					 <u--input
						placeholder="请输入手机号"
						border="surround"
						v-model="phone"
						:disabled='isshow'
						maxlength="11"
					  ></u--input>
				</view>
			</view>
			<view class="li">
				<text class="inputText">代理人类别：</text>
				<view class="input" @click="dailiren">
					<u--input
						placeholder="请选择代理人类别"
						border="surround"
						v-model="agent_type" 
						:readonly="true"
						:disabled='isshow'
						maxlength="11"
					 ></u--input>
					<u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
				</view>
			</view>
			<view class="li" v-if="isshow">
				<text class="inputText">申请状态：</text>
				<view class="input">
					 <u--input
						border="surround"
						v-model="is_statustext"
						:disabled='isshow'
						maxlength="11"
					  ></u--input>
				</view>
			</view>
			<view class="li" v-if="isshow">
				<block  v-if="info.is_status == 1">
					<text class="inputText">小程序码:</text>
					<view class="input">
						<view class="inputImg">
							<u--image :showLoading="true" :src="imgSrc" width="100px" height="100px"></u--image>
						</view>
						 
					</view>
				</block>
			</view>
			<view class="li" v-if="isshow">
				<block  v-if="info.is_status == 2">
					<text class="inputText">未通过原因:</text>
					<view class="input">
						<view class="input">
							 <u--input
								border="surround"
								v-model="info.remark"
								:disabled='isshow'
								maxlength="11"
							  ></u--input>
						</view>
						 
					</view>
				</block>
			</view>
			<view class="bts" v-if="!isshow">
				<!-- e54d42 -->
				<u-button type="primary" color="#e54d42" @click="logon" text="申请"></u-button>
			</view>
			<view class="bts cbes" style="width: 100%;display: flex;justify-content: space-between;" v-if="info.is_status == 1">
				<!-- e54d42 -->
				<u-button class="custom-style" type="primary" color="#e54d42" @click="onDown" text="下载小程序码"></u-button>
				<u-button class="custom-style" type="primary" color="#e54d42" @click="onBrowse(1)" text="浏览数据"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import{subAgent,getAgentStatus,createWxCode} from '@/api/index.js'
	export default {
		data() {
			return {
				isshow:false,
				phone:"",
				dlname:'',
				is_statustext:'',
				info:'',
				imgSrc:'',
				show: false,
				agent_type:'',//代理人类别
				columns: [
					['个人', '企业']
				],
			};
		},
		onLoad(option){
			this.agentStatus()
		},
		methods:{
			onBrowse(type){
				uni.navigateTo({
					url: '/package/agent/browse?type=' + type
				});
			},
			//点击选择代理人出现的弹窗
			dailiren(){
				if(!this.isshow){
					this.show = true;
				}
			},
			//选择代理人类别
			confirm(e) {
				console.log(e.value[0])
				this.show = false
				this.agent_type = e.value[0];
			},
			//获取代理人审核状态
			agentStatus(){
				getAgentStatus({}).then(res => {
					console.log(res)
					if(res.data != null){
						this.info = res.data;
						this.isshow = true;
						this.phone = res.data.agent_mobile;
						this.dlname = res.data.agent_name;
						
						if(res.data.agent_type == 1){
							this.agent_type = "个人"
						}else{
							this.agent_type = "企业"
						}
						if(res.data.is_status == 0){
							this.is_statustext = '待审核';
						}else if(res.data.is_status == 1){
							this.is_statustext = '审核通过';
							this.getcreateWxCode();
						}else if(res.data.is_status == 2){
							this.is_statustext = '未通过';
						}
						
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//下载小程序码
			onDown(){
				uni.authorize({
				  scope: 'scope.writePhotosAlbum',
				  success: () => {
				    // 用户已授权，可以进行下一步操作\
					this.xiazai(this.imgSrc)
				  },
				  fail: (err) => {
				    // 用户未授权，可以提示用户需要授权或跳转到设置页面
				    uni.showModal({
				      title: '提示',
				      content: '需要您的授权才能保存图片到相册',
				      showCancel: false,
				      confirmText: '去授权',
				      success: () => {
				        uni.openSetting();
				      },
				    });
				  },
				});
			},
			//下载图片
			xiazai(imguurl){
				uni.downloadFile({
				  url: imguurl, // 图片的在线路径
				  success: (downloadRes) => {
				    if (downloadRes.statusCode === 200) {
				      uni.saveImageToPhotosAlbum({
				        filePath: downloadRes.tempFilePath,
				        success: () => {
				          uni.showToast({
				            title: '图片保存成功',
				            icon: 'success',
				          });
				        },
				        fail: (err) => {
				          uni.showToast({
				            title: '保存图片失败',
				            icon: 'none',
				          });
				        },
				      });
				    }
				  },
				  fail: (err) => {
				    uni.showToast({
				      title: '下载图片失败',
				      icon: 'none',
				    });
				  },
				});
			},
			//生成小程序码
			getcreateWxCode(){
				createWxCode({}).then(res => {
					console.log(res)
					this.imgSrc = res.result;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//点击申请为代理人
			logon(){
				let phone_regular = /^1[3456789]\d{9}$/;
				let _this = this;
				if(this.dlname == ''){
					uni.$u.toast('请输入姓名');
					return false;
				}
				if(this.phone == ''){
					uni.$u.toast('请输入手机号');
					return false;
				}
				if(!(phone_regular.test(this.phone))) {
					uni.$u.toast('手机号有误，请重新输入');
				    return false;
				}
				let data = {};
				if(this.agent_type == '个人'){
					data = {agent_name:this.dlname,agent_type:1,agent_mobile:this.phone}
				}else{
					data = {agent_name:this.dlname,agent_type:2,agent_mobile:this.phone}
				}
				subAgent(data).then(e => {
					uni.showModal({
						title: '温馨提示',
						content: e.msg,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								_this.agentStatus();
							}
						}
					});
					
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			
		}
	}
</script>

<style lang="less">
	page {
		.cbes{
			.u-button{
				width: 45%;
			}
		}
		background-color: #f5f5f5;
		.cont{
			.text{
				width: 95%;
				height: 300rpx;
				background: linear-gradient(#fa8083,#e54d42);
				margin: 10rpx auto;
				color: #fff;
				font-size: 42rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				    border-radius: 10rpx;
			}
			.inputli{
				width: 90%;
				margin: 30rpx auto;
				background: #fff;
				border-radius: 10rpx;
				padding: 40rpx 2.5%;
				.li{
					margin-bottom: 20rpx;
					.inputText{
						padding: 20rpx 0;
						display: block;
						font-size: 30rpx;
						color: #333;
					}
					.input{
						background: #fff;
						.inputImg{
							width: 100px;
							height: 100px;
							border: 1px solid #ccc;
							margin: 0 auto;
						}
					}
				}
				.bts{
					width:60%;
					margin: 0 auto;
					margin-top: 80rpx;
				}
				
			}
			
			
			
		}
	}
	
</style>
